<template>
    <view class="banner">
        <swiper
            class="swiper over-hide"
            :autoplay="true"
            :duration="600"
            :interval="5000"
            :circular="true"
            @change="swiperChange"
        >
            <swiper-item v-for="(item, index) in list" :key="index">
                <view class="big over-hide">
                    <hj-image
                        :img="item.imageUrl"
                        height="100%"
                        width="100%"
                        mode="aspectFill"
                        :isPreview="true"
                        :previewImagesList="list.map(img => img.imageUrl)"
                    />
                </view>
            </swiper-item>
        </swiper>
        <view class="indicator t-w ft-26 center">{{ current || 1 }}/{{ list.length || 1 }}</view>
        <view class="nav align-center t-w ft-24 align-center">
            <view class="active align-center line-height1">房间</view>
            <view class="align-center line-height1 pl-12 pr-4" @click="handleClick">
                相册<hj-image
                    :isLoad="false"
                    src="right-04.png"
                    height="22rpx"
                    width="22rpx"
                    mode="aspectFit"
                />
            </view>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 详情相册
 * @author yinzhi
 * @date 2025-05
 */
import { ref, defineComponent } from 'vue'
defineComponent({
    name: 'DetailsAlbum'
})
const props = defineProps({
    list: {
        type: Array,
        default: () => {}
    }
})

// 当前滑块
const current = ref(1)

// 点击跳转相册列表
const handleClick = () => {
    uni.navigateTo({
        url: '/pages/hotel/hotel-album/index'
    })
}

// 滑动事件
const swiperChange = e => {
    current.value = Number(e.detail.current) + 1
}
</script>

<style scoped lang="scss">
.banner {
    width: 100%;
    position: relative;
    .indicator {
        position: absolute;
        bottom: 56rpx;
        right: 10rpx;
        z-index: 90;
        background: rgba($color: #000000, $alpha: 0.5);
        border-radius: 24rpx;
        height: 44rpx;
        padding: 0 16rpx;
    }
    .swiper {
        height: 600rpx;
    }
    .nav {
        position: absolute;
        bottom: 56rpx;
        left: 10rpx;
        z-index: 90;
        background: rgba($color: #000000, $alpha: 0.5);
        border-radius: 24rpx;
        height: 48rpx;
        padding: 0 8rpx;
        .active {
            background: $uni-bg-color;
            color: #333;
            height: 36rpx;
            border-radius: 18rpx;
            padding: 0 12rpx;
        }
    }
}
</style>
